<template>
  <view class="wrapper" type="line">
    <u-popup
      v-model="filterBoxShow"
      mode="bottom"
      @close="handleClose"
      border-radius="36rpx"
      length="90%"
    >
      <view class="filterBox">
        <view class="top">
          <view style="display: flex; width: 120rpx">
            <image
              :src="cancelIcon"
              v-if="clickPositionOrMajor != null"
              @click="returnLast()"
            ></image>
            <image :src="closeIcon" @click="closePop()"></image>
          </view>
          <text style="width: 120rpx; text-align: center">筛选</text>
          <view
            style="
              width: 120rpx;
              height: 100%;
              display: flex;
              justify-content: flex-end;
            "
          >
            <image
              :src="searchIcon"
              @click="filterSearchShow = true"
              v-if="clickPositionOrMajor != null"
            ></image>
          </view>
        </view>
        <view class="positionMajorList" v-if="clickPositionOrMajor == null">
          <view class="halfPart">
            <view class="titleAndMore">
              <view class="title">职业类别</view>
              <view class="more" @click="choosePositionOrMajor(0, null, 0)"
                >查看全部
                <img
                  :src="arrowRight"
                  @click="choosePositionOrMajor(0, null, 0)"
                />
              </view>
            </view>
            <view class="firstClassItems">
              <text
                :class="[
                  'cateTwoItem',
                  'mt',
                  item.navId == keywordFromParentInfo.topId
                    ? 'topNameSelected'
                    : '',
                ]"
                v-for="(item, index) in categoryList"
                :key="index"
                @click="choosePositionOrMajor(0, item, index)"
              >
                {{ item.navName }}
              </text>
            </view>
          </view>
          <view class="halfPart">
            <view class="titleAndMore">
              <view class="title">按专业</view>
              <view class="more" @click="choosePositionOrMajor(1, null, 0)"
                >查看全部
                <img
                  :src="arrowRight"
                  @click="choosePositionOrMajor(1, null, 0)"
                />
              </view>
            </view>
            <view class="firstClassItems">
              <text
                class="cateTwoItem mt"
                v-for="(item, index) in majorFirstList.slice(0, 18)"
                :key="item.positionTagId"
                @click="
                  choosePositionOrMajor(1, item, index, item.positionTagId)
                "
              >
                {{ item.tagName }}
              </text>
            </view>
          </view>
        </view>
        <view class="header" v-if="clickPositionOrMajor == 0">
          <view class="cateList">
            <u-tabs
              v-if="filterBoxShow"
              :current="currentIndex"
              name="navName"
              :list="categoryList"
              @change="handleCateClick"
              height="88"
              :active-item-style="activeItemStyle"
              :gutter="24"
              :bar-style="barStyle"
              font-size="28"
              :inactive-color="'#999999'"
            ></u-tabs>
          </view>
        </view>
        <scroll-view
          v-if="clickPositionOrMajor == 0"
          class="scrollBox"
          :scroll-y="true"
          @scroll="watchScroll"
          scroll-with-animation
          :scroll-into-view="scrollDomId"
        >
          <view class="filterList">
            <view
              class="filterItem scrollItem"
              :id="'scrollItem' + index"
              v-for="(cate, index) in categoryList"
              :key="cate.navId"
            >
              <text class="cateTop">{{ cate.navName }}</text>
              <view class="cateTwoList">
                <text
                  class="cateTwoItem mr"
                  @click="selectCategory('all', cate)"
                  >全部</text
                >
                <text
                  :class="[
                    'cateTwoItem',
                    item.navId == keywordFromParentInfo.parentId
                      ? 'topNameSelected'
                      : '',
                  ]"
                  v-for="(item, index) in cate.children"
                  :style="{
                    'margin-right': index + (1 % 2) != 0 ? '24rpx' : '',
                  }"
                  @click="selectCategory('child', cate, item)"
                  :key="item.navId"
                  >{{ item.navName }}</text
                >
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="header" v-if="clickPositionOrMajor == 1">
          <view class="cateList">
            <u-tabs
              v-if="filterBoxShow"
              :current="currentIndex"
              name="tagName"
              :list="majorAllLevelList"
              @change="handleCateClick"
              height="88"
              :active-item-style="activeItemStyle"
              :gutter="24"
              :bar-style="barStyle"
              font-size="28"
              :inactive-color="'#999999'"
            ></u-tabs>
          </view>
          <view>
            <u-tabs
              class="majorTabs"
              v-if="filterBoxShow"
              :current="currentIndexMajorSecond"
              name="tagName"
              :list="majorSecondList"
              @change="handleCateClickMajor"
              height="88"
              :active-item-style="activeItemStyleMajor"
              :gutter="24"
              :bar-style="barStyleMajor"
              font-size="28"
              item-width="138"
              :inactive-color="'#999999'"
            ></u-tabs>
          </view>
        </view>
        <scroll-view
          v-if="clickPositionOrMajor == 1"
          class="scrollBoxMajor"
          :scroll-y="true"
          @scroll="watchScrollMajor"
          scroll-with-animation
          :scroll-into-view="scrollDomId"
        >
          <view class="filterList">
            <view
              v-for="(majorSecond, indexSecond) in majorAllLevelList"
              :id="'scrollItem' + indexSecond"
              :key="majorSecond.positionTagId"
              class="scrollItem"
            >
              <view
                class="filterItem scrollItemSecond"
                :id="'scrollItemSecond' + cate.positionTagId"
                v-for="cate in majorSecond.children"
                :key="cate.positionTagId"
              >
                <text class="cateTop">{{ cate.tagName }}</text>
                <view class="cateTwoList">
                  <text
                    class="cateTwoItem mr"
                    @click="selectCategory('all', cate)"
                    >全部</text
                  >
                  <text
                    class="cateTwoItem"
                    v-for="(item, index) in cate.children"
                    :style="{
                      'margin-right': index + (1 % 2) != 0 ? '24rpx' : '',
                    }"
                    @click="selectCategory('child', cate, item)"
                    :key="item.positionTagId"
                    >{{ item.tagName }}</text
                  >
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <u-popup
        v-model="filterSearchShow"
        mode="right"
        border-radius="36rpx"
        length="100%"
      >
        <view class="filterBox">
          <view class="header mt">
            <view class="top hisTop">
              <image :src="cancelIcon" @click="searchBoxClose"></image>
              <u-search
                class="search"
                placeholder="搜索您感兴趣的类别"
                v-model="keyword"
                @change="handleSearch"
                @search="handleSearch($event, 'enter')"
                :search-icon="searchIcon1"
                height="72"
                :show-action="false"
              ></u-search>
            </view>
            <view
              class="history"
              v-if="!keyword && historyList.length && clickPositionOrMajor == 0"
            >
              <text class="left">历史记录</text>
              <image
                :src="deleteIcon"
                class="deleteIcon"
                @click="handleDeleteIcon"
              ></image>
            </view>
            <view
              class="history"
              v-if="
                !keyword && historyMajorList.length && clickPositionOrMajor == 1
              "
            >
              <text class="left">历史记录</text>
              <image
                :src="deleteIcon"
                class="deleteIcon"
                @click="handleDeleteIcon"
              ></image>
            </view>
          </view>
          <!-- 历史记录列表 -->
          <view
            class="filterList historyList"
            v-if="!keyword && historyList.length && clickPositionOrMajor == 0"
          >
            <view class="cateTwoList">
              <text
                class="cateTwoItem mr"
                v-for="item in historyList"
                @click="selectCategory('history', item)"
                :key="item.navId"
                >{{ item.realName }}</text
              >
            </view>
          </view>
          <view
            class="filterList historyList"
            v-if="
              !keyword && historyMajorList.length && clickPositionOrMajor == 1
            "
          >
            <view class="cateTwoList">
              <text
                class="cateTwoItem mr"
                v-for="item in historyMajorList"
                @click="selectCategory('history', item)"
                :key="item.positionTagId"
                >{{ item.tagName }}</text
              >
            </view>
          </view>
          <!-- 搜索列表 -->
          <view
            class="filterList searchList"
            v-if="keyword && clickPositionOrMajor == 0"
          >
            <view
              class="filterItem"
              v-for="cate in searchResult"
              :key="cate.navId"
            >
              <text class="cateTop">{{ cate.navName }}</text>
              <view class="cateTwoList">
                <text
                  class="cateTwoItem mr"
                  @click="selectCategory('all', cate, '', false)"
                  >全部</text
                >
                <text
                  class="cateTwoItem"
                  v-for="(item, index) in cate.searchChildren"
                  @click="selectCategory('child', cate, item, true)"
                  :style="{
                    'margin-right': index + (1 % 2) != 0 ? '24rpx' : '',
                  }"
                  :key="item.navId"
                  >{{ item.navName }}</text
                >
              </view>
            </view>
            <view
              class="noneResult"
              v-if="keyword && !searchResult.length && noneResult"
            >
              <image :src="emptyImg" class="empty_image"></image>
              <view class="empty-title" @click="searchBoxClose()">
                暂无精准匹配类别，请在已有类别中选择 >
              </view>
            </view>
          </view>
          <view
            class="filterList searchList"
            v-if="keyword && clickPositionOrMajor == 1"
          >
            <view
              class="filterItem"
              v-for="cate in searchResult"
              :key="cate.positionTagId"
            >
              <text class="cateTop">{{
                `${cate.parentName} · ${cate.tagName}`
              }}</text>
              <view class="cateTwoList">
                <text
                  class="cateTwoItem mr"
                  @click="selectCategory('all', cate, '', false)"
                  >全部</text
                >
                <text
                  class="cateTwoItem"
                  v-for="(item, index) in cate.searchChildren"
                  @click="selectCategory('child', cate, item, true)"
                  :style="{
                    'margin-right': index + (1 % 2) != 0 ? '24rpx' : '',
                  }"
                  :key="item.positionTagId"
                  >{{ item.tagName }}</text
                >
              </view>
            </view>
            <view
              class="noneResult"
              v-if="keyword && !searchResult.length && noneResult"
            >
              <image :src="emptyImg" class="empty_image"></image>
              <view class="empty-title" @click="searchBoxClose()">
                暂无精准匹配专业，请在已有类别中选择 >
              </view>
            </view>
          </view>
        </view>
      </u-popup>
      <!--  //选择职业 -->
      <u-popup
        v-model="filterJobShow"
        mode="right"
        border-radius="36rpx"
        length="100%"
      >
        <view class="filterBox">
          <view class="header mt">
            <view class="top hisTop">
              <image :src="cancelIcon" @click="jobListBoxClose"></image>
              <text class="cateName">根据{{ navCategoryTitle }}筛选结果 </text>
              <text class="cateName"> </text>
            </view>
          </view>
          <!--  职位列表 -->
          <view class="card allPosition" id="cardHeader">
            <view class="cardHeader">
              <view class="cateNameContainer" @click="openFilterBox">
                <img class="cateNameIcon" :src="allCareerIcon" alt="" />
                <text class="cateName">{{ categoryTitle }} </text>
                <text class="cateNum">{{ positionNum || "" }}</text>
                <img class="cateArrowIcon" :src="cateArrowIcon" alt="" />
              </view>
            </view>
            <view v-if="!loading && positionsListShow.length > 0">
              <view class="positionList">
                <view
                  class="posCard scrollItem"
                  v-for="(pos, i) in positionsListShow"
                  :key="pos.navId"
                >
                  <view :class="{ cateTag: true }">
                    <text class="cateTagTitle"
                      >{{ pos.parentName }} · {{ pos.navName }}</text
                    >
                    <image
                      class="photo"
                      v-if="pos.children.length > 1"
                      :class="{ scaleImg: i == 0 }"
                      :src="pos.navPhoto"
                    >
                    </image>
                  </view>
                  <view class="cateContent">
                    <view
                      :class="[
                        'positionItem',
                        item.navId == keywordFromParentInfo.navId
                          ? 'positionNameSelected'
                          : '',
                      ]"
                      v-for="(item, index) in pos.children"
                      :key="item.valueId"
                      @click="toPositionDetail(item, pos)"
                      :style="{ 'margin-left': index % 2 == 1 ? '16rpx' : '' }"
                    >
                      <text class="tagTitle">{{ item.navName }}</text>
                      <text class="desc">{{ item.navDesc || "" }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view v-if="!loading && positionsListShow.length == 0">
              <view class="positionList" style="height: 450rpx">
                <Empty
                  :baseImg="emptyImg"
                  text="暂无相关职业~"
                  :fontWeight="400"
                  class="empty"
                />
              </view>
            </view>
            <u-loadmore
              v-if="positionsListShow.length > 0"
              :status="status"
              :load-text="loadText"
              font-size="24"
              color="#bfbfbf"
            />
          </view>
        </view>
      </u-popup>
    </u-popup>
  </view>
</template>

<script>
import share from "@/mixins/share";
import {
  getNavigationTree,
  getSonNavigationTree,
  getNavigationListByTagId,
  matchPositionListNew,
} from "@/api/modules/career";
import { getPositionTagList, getAllPositionTagTree } from "@/api/modules/major";
import { throttle } from "@/utils/event";
export default {
  mixins: [share],
  name: "allCategory",
  props: {
    keywordFromParent: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      closeIcon: this.$imgBaseSelf + "common/close.png",
      searchIcon: this.$imgBaseSelf + "common/searchBlob.png",
      searchIcon1: this.$imgBaseSelf + "common/search_3.png",
      deleteIcon: this.$imgBaseSelf + "common/delete.png",
      cancelIcon: this.$imgBaseSelf + "common/cancel.png",
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      arrowRight: this.$imgBaseSelf + "common/arrowRight.png",
      categoryList: [],
      searchResult: [],
      historyList: [],
      historyMajorList: [],
      noneResult: false,
      filterBoxShow: false,
      filterSearchShow: false,
      filterJobShow: false,
      keyword: "",
      activeItemStyle: {
        "font-weight": "600",
        color: "#000000",
        "font-size": "32rpx",
      },
      barStyle: {
        width: "20px",
        height: "8px",
        background:
          "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #F75A3E 100%)",
        "border-radius": "4px",
        left: "0",
        bottom: "12rpx",
      },
      barStyleMajor: {
        width: "0px",
        height: "0px",
      },
      activeItemStyleMajor: {
        color: "#f75a3e",
        border: "1px solid #f04646",
        background: "#fff9f8",
      },
      //滚动锚点 start
      currentIndex: 0,
      currentIndexMajorSecond: 0,
      secondAll: 0,
      scrollDomId: "",
      heightArr: [],
      heightArrSecond: [], //专业二级元素高度
      distance: 0,
      distanceSecond: 0,
      isClickTab: false, //判断用户是否点击了tabs标签
      //滚动锚点 end
      clickPositionOrMajor: null,
      clickDetailName: null,
      majorFirstList: [],
      majorAllLevelList: [],
      majorSecondAllList: [], //历史搜索专用包含一级标题
      majorSecondList: [], //专业滚动专用
      allCareerIcon: this.$imgBaseSelf + "common/allCareerIcon.png",
      positionsListShow: [], //职位列表
      loading: false,
      navCategoryTitle: "全部",
      categoryTitle: "全部职业",
      positionNum: 4558, //目前列表的总职位数目，一定要是数字类型，滚动加载的时候会用到加法
      status: "loading",
      loadText: {
        loading: "加载中",
        nomore: "已经到底了~",
      },
      keywordFromParentInfo: {}, // 用来配合match接口做高亮的
    };
  },
  watch: {
    keywordFromParent: {
      handler(val) {
        console.log("父组件传递过来的keywordFromParent发生了变化", val);
        this.matchPositionListNewFn();
      },
      immediate: true,
      deep: true,
    },
  },
  onLoad() {},
  mounted() {
    this.getNavigationTree();
    this.getMajorTree();
    this.getAllPositionTagTreeList(1);
    this.getAllPositionTagTreeList(2);
  },

  methods: {
    async matchPositionListNewFn() {
      const params = {
        matchName: this.keywordFromParent,
        pageNo: 1,
        pageSize: 999,
      };
      const res = await matchPositionListNew(params);
      if (res.code == 200) {
        console.log("res", res);
        console.log("this.keywordFromParent", this.keywordFromParent);
        // 判断数组长度
        // 如果数组长度 >0 遍历一遍找到和this.keywordFromParent完全相等的
        // 如果数组长度是 0说明没有结果
        if (res.data.length > 0) {
          try {
            res.data.forEach((item) => {
              if (item.positionName == this.keywordFromParent) {
                this.keywordFromParentInfo = item;
                throw new Error(); //结束整体循环
              } else {
                this.keywordFromParentInfo = {};
              }
            });
          } catch (error) {
            console.log("error");
          }
        } else {
          this.keywordFromParentInfo = {};
          return;
        }
      }
    },
    getAllPositionTagTreeList(type) {
      getAllPositionTagTree({
        tagType: "10",
        cateType: "10,30",
        treeType: type,
      })
        .then((res) => {
          if (res.code == 200) {
            if (type == 1) {
              this.majorSecondAllList = res.data || [];
            } else {
              this.majorAllLevelList = res.data;
              this.majorSecondList = res.data[0].children;
            }
          }
        })
        .catch((err) => {});
    },
    init() {
      console.log("这里执行到了子组件的init方法", this.keywordFromParentInfo);
      // this.matchPositionListNewFn();
      this.filterBoxShow = true;
      // this.selectHeight();
      this.historyList = JSON.parse(
        uni.getStorageSync("categoryHistory") || "[]"
      );
      this.historyMajorList = JSON.parse(
        uni.getStorageSync("majorHistory") || "[]"
      );
    },
    getCurrentSecondIndexAll() {
      let currentSecondId =
        this.majorSecondList[this.currentIndexMajorSecond].positionTagId;
      console.log("currentSecondId", currentSecondId);
      this.secondAll = this.majorSecondAllList.findIndex(
        (item) => item.positionTagId === currentSecondId
      );
      console.log("this.secondAll", this.secondAll);
    },
    handleCateClick(index) {
      this.isClickTab = true;
      this.currentIndex = index;
      // if (this.clickPositionOrMajor == 0) {
      //   this.scrollDomId = "scrollItem" + index;
      // } else
      if (this.clickPositionOrMajor == 1) {
        this.majorSecondList = this.majorAllLevelList[index].children;
        this.currentIndexMajorSecond = 0;
        this.getCurrentSecondIndexAll();
      }
      this.scrollDomId = "scrollItem" + index;
      // this.barStyle.left = index == 0 ? "0" : "-20rpx";
    },
    handleCateClickMajor(index, item) {
      this.isClickTab = true;
      this.currentIndexMajorSecond = index;
      this.getCurrentSecondIndexAll();
      this.scrollDomId =
        "scrollItemSecond" + this.majorSecondList[index].positionTagId;
    },
    handleClose() {
      this.filterSearchShow = false;
      this.filterBoxShow = false;
      this.filterJobShow = false;
      this.clickPositionOrMajor = null;
      this.currentIndex = 0;
      this.currentIndexMajorSecond = 0;
      this.keyword = "";
      this.secondAll = 0;
      this.scrollDomId = "";
      this.$emit("update:showFilterBox", false);
    },
    //监听scroll-view的滚动事件
    watchScroll(e) {
      if (this.isClickTab) return (this.isClickTab = false);
      let scrollTop = e.detail.scrollTop; //获取距离顶部的距离
      console.log(
        "-------watchScroll--------scrollTop",
        scrollTop,
        this.distance,
        this.currentIndex,
        this.heightArr
      );
      let active = this.currentIndex;
      if (scrollTop >= this.distance) {
        if (
          active + 1 < this.heightArr.length &&
          scrollTop >= this.heightArr[active]
        ) {
          this.currentIndex += 1;
        }
      } else {
        if (active - 1 >= 0 && scrollTop < this.heightArr[active - 1]) {
          this.currentIndex -= 1;
        }
      }
      this.distance = scrollTop;
    },
    watchScrollMajor: throttle(function (e) {
      if (this.isClickTab) return (this.isClickTab = false);
      let scrollTop = e.detail.scrollTop; //获取距离顶部的距离
      console.log(
        "scrollTop",
        scrollTop,
        this.distanceSecond,
        this.currentIndexMajorSecond
      );
      let active = this.currentIndex;
      if (scrollTop >= this.distance) {
        if (
          active + 1 < this.heightArr.length &&
          scrollTop >= this.heightArr[active]
        ) {
          this.currentIndex += 1;
          this.majorSecondList =
            this.majorAllLevelList[this.currentIndex].children;
          this.currentIndexMajorSecond = 0;
          this.secondAll += 1;
        }
      } else {
        if (active - 1 >= 0 && scrollTop < this.heightArr[active - 1]) {
          this.currentIndex -= 1;
          this.majorSecondList =
            this.majorAllLevelList[this.currentIndex].children;
          this.currentIndexMajorSecond = this.majorSecondList.length - 1;
          this.secondAll -= 1;
        }
      }
      this.distance = scrollTop;
      if (this.clickPositionOrMajor == 1) {
        console.log(
          "当前二级索引",
          this.currentIndexMajorSecond,
          this.secondAll
        );

        let activeSecond = this.secondAll;
        console.log(
          "当前weizhi",
          this.heightArrSecond[activeSecond - 1],
          this.heightArrSecond[activeSecond],
          this.heightArrSecond[activeSecond + 1]
        );
        if (scrollTop >= this.distanceSecond) {
          if (
            activeSecond + 1 < this.majorSecondAllList.length &&
            scrollTop >= this.heightArrSecond[activeSecond]
          ) {
            this.currentIndexMajorSecond += 1;
            this.secondAll += 1;
          }
        } else {
          if (
            activeSecond - 1 >= 0 &&
            scrollTop < this.heightArrSecond[activeSecond - 1]
          ) {
            this.currentIndexMajorSecond -= 1;
            this.secondAll -= 1;
          }
        }
        this.distanceSecond = scrollTop;
      }
    }, 200),
    //计算每个锚点的高度
    selectHeight(index) {
      this.$nextTick(() => {
        let list = [];
        let height = 0;
        const query = uni.createSelectorQuery().in(this);
        query.selectAll(".scrollItem").boundingClientRect();
        query.exec((res) => {
          res[0].forEach((item) => {
            height += parseInt(item.height);
            list.push(height);
          });
          this.heightArr = list;
        });
        if (this.clickPositionOrMajor == 1) {
          let listSecond = [];
          let heightSecond = 0;
          const querySecond = uni.createSelectorQuery().in(this);
          querySecond.selectAll(".scrollItemSecond").boundingClientRect();
          querySecond.exec((res) => {
            console.log("res", res);
            res[0].forEach((item) => {
              heightSecond += parseInt(item.height);
              listSecond.push(heightSecond);
            });
            this.heightArrSecond = listSecond;
          });
        }
        if (index != 0) {
          setTimeout(() => {
            this.scrollDomId = "scrollItem" + index;
          }, 100);
        }
        if (this.clickPositionOrMajor == 1) {
          this.handleCateClick(index);
        }
        this.isClickTab = true;
      });
    },
    handleSearch() {
      // 本地搜索
      let key = this.keyword.trim();
      if (!key) {
        this.searchResult = [];
        this.noneResult = true;
        return;
      }
      if (this.clickPositionOrMajor == 0) {
        const categoryList = this.categoryList;
        this.searchResult = categoryList.filter((item) => {
          item.searchChildren = [];
          // if (item.tagTitle.toLowerCase().includes(key)) {
          //   searchResult.push(item);
          // }
          item.score = 0;
          if (item.navName.toLowerCase() == key.toLowerCase()) {
            item.searchChildren = item.children;
            item.score += 1000;
            return item;
          }
          if (item.navName.toLowerCase().includes(key.toLowerCase())) {
            item.searchChildren = item.children;
            item.score += 500;
            return item;
          }
          let res =
            (item.children &&
              item.children.filter((v) => {
                return v.navName.toLowerCase().includes(key.toLowerCase());
              })) ||
            [];
          if (res.length > 0) {
            item.searchChildren = res;
            item.score += res.length;
            return item;
          }
        });
        this.searchResult.sort((a, b) => b.score - a.score);
        if (!this.searchResult.length) {
          this.noneResult = true;
        }
      } else {
        const majorFirstList = this.majorSecondAllList;
        this.searchResult = majorFirstList.filter((item) => {
          item.searchChildren = [];
          // if (item.tagTitle.toLowerCase().includes(key)) {
          //   searchResult.push(item);
          // }
          item.score = 0;
          if (item.parentName.toLowerCase() == key.toLowerCase()) {
            item.searchChildren = item.children;
            item.score += 1500;
            return item;
          }
          if (item.parentName.toLowerCase().includes(key.toLowerCase())) {
            item.searchChildren = item.children;
            item.score += 2000;
            return item;
          }
          if (item.tagName.toLowerCase() == key.toLowerCase()) {
            item.searchChildren = item.children;
            item.score += 1000;
            return item;
          }
          if (item.tagName.toLowerCase().includes(key.toLowerCase())) {
            item.searchChildren = item.children;
            item.score += 500;
            return item;
          }
          let res =
            (item.children &&
              item.children.filter((v) => {
                return v.tagName.toLowerCase().includes(key.toLowerCase());
              })) ||
            [];
          if (res.length > 0) {
            item.searchChildren = res;
            item.score += res.length;
            return item;
          }
        });
        this.searchResult.sort((a, b) => b.score - a.score);
        if (!this.searchResult.length) {
          this.noneResult = true;
        }
      }
    },
    /**
     * tag =>all 全部 child 选择三级分类
     * cate => 一级分类
     * item => 二级分类
     * flag => true(保存到本地)
     */
    selectCategory(tag, cate, item, flag) {
      let params = {};
      params.positionOrMajor = this.clickPositionOrMajor;
      if (this.clickPositionOrMajor == 0) {
        let bigTitle = cate.categoryTitle || cate.navName;
        //原本超过2个字会省略，在2023年9月5日16:25:15改版中去掉了
        // if (cate.navName.length > 2&&tag !== "history") {
        //   bigTitle = cate.navName.slice(0, 2) + "...";
        // }
        if (tag == "all") {
          // params.categoryTitle = bigTitle + " · 全部";
          params.categoryTitle = bigTitle;
          params.levelNum = 1;
          params.navId = cate.navId;
          params.navName = bigTitle; //2023年9月14日17:30:53 蓓莹让改成选中后显示一级,用于去重
        } else if (tag == "child") {
          // params.categoryTitle = bigTitle + " · " + item.navName;
          params.categoryTitle = bigTitle;
          params.levelNum = 2;
          params.navId = item.navId;
          params.navName = bigTitle; //2023年9月14日17:30:53 蓓莹让改成选中后显示一级
          params.realName = item.navName;
        } else if (tag == "history") {
          params = { ...cate };
          params.categoryTitle = bigTitle;
        }
        this.categoryTitle = params.navName;
        this.navCategoryTitle = params.realName || params.navName;
      } else if (this.clickPositionOrMajor == 1) {
        if (tag == "all") {
          // params.tagName = cate.tagName + " · 全部";
          params.tagName = cate.tagName;
          params.levelNum = 2;
          params.positionTagId = cate.positionTagId;
        } else if (tag == "child") {
          // params.tagName = cate.tagName + " · " + item.tagName;
          params.tagName = cate.tagName;
          params.levelNum = 3;
          params.positionTagId = item.positionTagId;
          params.tagName = item.tagName;
        } else if (tag == "history") {
          params = { ...cate };
        }
        this.categoryTitle = params.tagName;
        this.navCategoryTitle = params.tagName;
      }
      console.log(
        "-----selectCategory--------->tag, cate, item, flag",
        this.navCategoryTitle,
        this.categoryTitle,
        params
      );
      if (flag) {
        this.saveHistory(params, this.clickPositionOrMajor);
      }

      this.filterSearchShow = false;
      this.filterJobShow = true;
      if (this.clickPositionOrMajor == 0) {
        const categoryParams = {
          levelNum: params.levelNum,
          navId: params.navId,
        };
        this.getCategoryJobList(categoryParams);
      } else if (this.clickPositionOrMajor == 1) {
        const majorParams = {
          tagLevel: params.levelNum,
          positionTagId: params.positionTagId,
        };
        this.getMajorJobList(majorParams);
      }
    },
    getCategoryJobList(params) {
      this.loading = true;
      console.log("-----获取职位列表--------->", params);
      getSonNavigationTree(params)
        .then((res) => {
          if (res.code == 200) {
            if (res.data.length) {
              console.log("diyici", +res.data[0].positionNum);

              this.positionNum = +res.data[0].positionNum;
            } else {
              console.log("dierci");
              this.positionNum = 0;
            } //职位数目
            this.positionsListShow = res.data[0].children; //这里只包含了二三级
            this.status = "nomore";
            this.selectHeight();
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    getMajorJobList(params) {
      this.loading = true;
      console.log("-----获取职位列表--------->", params);
      getNavigationListByTagId(params)
        .then((res) => {
          if (res.code == 200) {
            this.positionsListShow = [];
            this.active = 0;
            this.positionNum = 0;
            let list = [];
            res.data.forEach((item, index) => {
              list = list.concat(item.children);
              this.positionNum += +item.positionNum;
            });
            this.positionsListShow = list;
            this.status = "nomore";
            this.selectHeight();
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    openFilterBox() {
      this.filterBoxShow = true;
      this.filterSearchShow = false;
      this.filterJobShow = false;
    },
    saveHistory(params, type) {
      if (type == 0) {
        let history = JSON.parse(uni.getStorageSync("categoryHistory") || "[]");
        history.unshift({ ...params });
        history = this.unique(history);
        uni.setStorageSync("categoryHistory", JSON.stringify(history));
      } else {
        let history = JSON.parse(uni.getStorageSync("majorHistory") || "[]");
        history.unshift({ ...params });
        history = this.uniqueMajor(history);
        uni.setStorageSync("majorHistory", JSON.stringify(history));
      }
    },
    // 对搜索历史去重
    unique(arr) {
      let newArr = [];
      arr.forEach((i, v) => {
        let flag = true;
        newArr.forEach((item) => {
          if (i.navId == item.navId) flag = false;
        });
        flag ? newArr.push(i) : newArr;
      });
      return newArr;
    },
    uniqueMajor(arr) {
      let newArr = [];
      arr.forEach((i, v) => {
        let flag = true;
        newArr.forEach((item) => {
          if (i.positionTagId == item.positionTagId) flag = false;
        });
        flag ? newArr.push(i) : newArr;
      });
      return newArr;
    },
    handleDeleteIcon() {
      if (this.clickPositionOrMajor == 0) {
        this.historyList = [];
        uni.setStorageSync("categoryHistory", JSON.stringify([]));
      } else {
        this.historyMajorList = [];
        uni.setStorageSync("majorHistory", JSON.stringify([]));
      }
    },
    //先获取一级
    getNavigationTree() {
      getNavigationTree()
        .then((res) => {
          if (res.code == 200) {
            this.categoryList = res.data || [];
          }
        })
        .catch((err) => {});
    },
    getMajorTree() {
      getPositionTagList({
        tagLevel: "1",
        tagType: "10",
        cateType: "10,30",
      })
        .then((res) => {
          if (res.code == 200) {
            this.majorFirstList = res.data || [];
          }
        })
        .catch((err) => {});
    },
    // getMajorByFirst(id) {
    //   //根据一级专业标题获取二级和三级列表，每次tab点击都会调用
    //   this.isClickTab = true;
    //   this.majorAllLevelList = [];
    //   this.scrollDomId = "";
    //   getPositionTagTree({
    //     positionTagId: id,
    //     tagType: "10",
    //     cateType: "10,30",
    //   })
    //     .then((res) => {
    //       if (res.code == 200) {
    //         this.majorAllLevelList = res.data || [];
    //         this.selectHeight(0);
    //       }
    //     })
    //     .catch((err) => {});
    // },
    //选择职业与专业 cate 0代表行业，1代表专业
    choosePositionOrMajor(cate, name, index, id) {
      console.log("cate, name, index, id", cate, name, index, id);
      // return
      this.clickPositionOrMajor = cate;
      this.clickDetailName = name;
      this.currentIndex = index;
      this.selectHeight(index);
      //  this.getMajorByFirst(id);
      // if (cate == 0) {
      // } else if (cate == 1) {
      //   if (!id) {
      //     id = this.majorFirstList[0].positionTagId;
      //   }
      //   // this.getMajorByFirst(id);
      // }
    },
    returnLast() {
      this.clickPositionOrMajor = null;
      this.currentIndex = 0;
      this.currentIndexMajorSecond = 0;
      this.secondAll = 0;
      this.scrollDomId = "";
    },
    closePop() {
      this.filterBoxShow = false;
      this.scrollDomId = "";
    },
    searchBoxClose() {
      this.filterSearchShow = false;
      this.keyword = "";
    },
    jobListBoxClose() {
      this.filterJobShow = false;
    },
    toPositionDetail(item, parent) {
      let tagTitle = "";
      let positionId = "";
      let parentTitle = "";
      let topTitle = "";
      if (item.ylPositionId) {
        tagTitle = item.positionName || "";
        positionId = item.ylPositionId;
        parentTitle = item.parentName;
        topTitle = item.topName;
      } else {
        tagTitle = item.navName || "";
        positionId = item.valueId;
        parentTitle = item.parentName || parent.navName || "";
        topTitle =
          item.topName ||
          parent.parentName ||
          this.topTabsList[this.currentTopTabIndex].navName ||
          "";
      }
      wx.reportEvent("advertise", {
        uid: this.personId,
        career: tagTitle,
        page: this.pageName,
      });
      const jobParams = {
        tagTitle: tagTitle,
        positionId: positionId,
        parentTitle: parentTitle,
        topTitle: topTitle,
        pageName: this.pageName,
      };
      console.log("---emit----jobParams------>", jobParams);
      this.$emit("update", { ...jobParams });
      // 延迟执行下否者可能会高度计算错误
      this.filterJobShow = false;
      setTimeout(() => {
        this.handleClose();
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
.filterBox {
  padding: 0rpx 0rpx 0 8rpx;
  .top {
    z-index: 999;
    margin-top: 0rpx;
    top: 0;
    width: 710rpx;
    padding: 48rpx 24rpx 0rpx 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    background: #fff;
    border-top-left-radius: 36rpx;
    &.hisTop {
      margin-bottom: 48rpx;
      margin-top: 0rpx;
      padding-top: 48rpx;
      width: 720rpx;
    }
    image {
      width: 40rpx;
      height: 40rpx;
      & ~ image {
        margin-left: 40rpx;
      }
    }
    text {
      font-size: 36rpx;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #222222;
      line-height: 44rpx;
    }
    .search {
      flex: 1;
      margin-left: 10rpx;
    }
  }
  .positionMajorList {
    width: 100%;
    padding-top: 96rpx;
    height: calc(100vh * 0.84);
    display: flex;
    flex-direction: column;
    .halfPart {
      flex: 1;
      padding: 20px 16px 10px 16px;
      display: flex;
      flex-direction: column;
      .titleAndMore {
        width: 100%;
        height: 40rpx;
        display: flex;
        justify-content: space-between;
        .title {
          font-size: 32rpx;
          font-family: PingFang-SC-Bold, PingFang-SC;
          font-weight: bold;
          color: #222222;
          line-height: 44rpx;
        }
        .more {
          font-size: 24rpx;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #999999;
          line-height: 36rpx;
          display: flex;
          align-items: center;
          img {
            width: 12rpx;
            height: 19rpx;
            margin-left: 16rpx;
          }
        }
      }
      .firstClassItems {
        width: 100%;
        display: grid;
        justify-content: space-between;
        align-items: start;
        grid-template-columns: repeat(auto-fill, 212rpx);
      }
    }
  }
  .cateTwoItem {
    min-width: 212rpx;
    height: 64rpx;
    margin-bottom: 24rpx;
    line-height: 64rpx;
    text-align: center;
    padding: 0 24rpx;
    font-size: 28rpx;
    color: #222222;
    border-radius: 8rpx;
    border: 1px solid rgba(219, 219, 219, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &.mr {
      margin-right: 24rpx;
    }
    &.mt {
      margin-top: 22rpx;
      margin-bottom: 0rpx;
    }
  }
  .topNameSelected {
    background: #ffebe7;
    color: #f75a3e;
    border: none;
  }
  .positionNameSelected {
    border: 2rpx solid #f75a3e;
  }
  .header {
    position: fixed;
    top: 0;
    margin-top: 90rpx;
    width: 710rpx;
    background: #fff;
    z-index: 999;

    .cateList {
      margin-top: 18rpx;
    }
    .history {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 26rpx;
      padding-left: 24rpx;
      .left {
        font-size: 26rpx;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: 400;
        color: #888888;
      }
      .deleteIcon {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
  .mt {
    margin-top: 160rpx;
  }
  .majorSecondTabs {
    z-index: 999;
    position: fixed;
    background: #fff;
    overflow-x: auto;
    top: 0;
    margin-top: 196rpx;
    white-space: nowrap;
    width: 710rpx;
    .majorSecondItems {
      text-align: center;
      display: inline-block;
      padding: 14rpx 16rpx 16rpx 16rpx;
      width: 138rpx;
      margin-left: 24rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      border-radius: 8rpx;
      background: #f5f5f5;
      color: #222222;
      border: none;
    }
    .active {
      color: #f75a3e;
      border: 1px solid #f04646;
      background: #fff9f8;
    }
  }
  .scrollBox {
    height: calc(100vh * 0.9);
    margin-top: 212rpx;
    position: fixed;
  }

  .scrollBoxMajor {
    position: fixed;
    height: calc(100vh * 0.9);
    margin-top: 270rpx;
  }
  .filterList {
    padding-left: 24rpx;
    padding-bottom: 280rpx;
    .filterItem {
      padding-bottom: 20rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      .cateTop {
        display: block;
        margin-bottom: 32rpx;
        font-size: 32rpx;
        color: #999999;
        line-height: 44rpx;
      }
    }
    &.historyList {
      padding-top: 234rpx;
      margin-top: 0;
    }
    &.searchList {
      padding-top: 168rpx;
      margin-top: 0;
    }
    .cateTwoList {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    &::after {
      content: "";
      width: 212rpx;
    }
  }
  .noneResult {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border-radius: 8rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    margin-top: 130rpx;
    .empty_image {
      width: 400rpx;
      height: 400rpx;
    }
    .empty-title {
      color: #f75a3e;
      line-height: 40rpx;
    }
  }
}
.slide-in {
  transform: translateX(100%);
  transition: transform 0.5s ease-in-out;
}
.slide-in-enter-active {
  transform: translateX(0);
}
.slide-in-leave-active {
  transform: translateX(100%);
}
::v-deep .u-tab-item {
  z-index: 999999;
}
.u-tabs__wrapper__nav {
}
.card {
  font-family: PingFang-SC-Bold, PingFang-SC;

  .recom {
    margin-bottom: 28rpx;
    display: flex;
    align-items: center;
  }

  .posList {
    display: flex;
    // flex-wrap: wrap;
    margin-top: 20rpx;
    overflow-x: scroll;
    // justify-content: space-between;

    .posItem {
      // width: 156rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-right: 40rpx;
      text {
        display: block;
      }

      .avator {
        width: 108rpx;
        height: 108rpx;
        border-radius: 50%;
        margin-bottom: 16rpx;
        position: relative;
        background: #ebebeb;

        & > image {
          width: 108rpx;
          height: 96rpx;
          position: absolute;
          bottom: 0;
          border-radius: 50%;
        }
      }

      .cate {
        max-width: 180rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 26rpx;
        line-height: 40rpx;
        color: #333333;

        &.name {
          margin-bottom: 8rpx;
          font-weight: 600;
        }
      }

      .cateTop {
        font-weight: 400;
        font-size: 24rpx;
        color: #98a0b0;
      }
    }
    .morePos {
      padding-top: 30rpx;
      height: 218rpx;
      width: 50rpx;
      background: #f6f6f6;
      border-radius: 6rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 22rpx;
      font-weight: 400;
      color: #bbbbbb;
      img {
        margin-top: 28rpx;
        width: 20rpx;
        height: 20rpx;
        margin-left: 5rpx;
      }
      view {
        text-align: center;
        width: 22rpx;
        line-height: 28rpx;
      }
    }

    // &::after {
    //   content: "";
    //   width: 222rpx;
    // }
  }
  .recomPosList {
    margin-top: 30rpx;
    padding-left: 28rpx;
  }

  &.recomBox {
    position: relative;
    background-image: url($img-base + "common/" + "recomBox_background.png");
    background-color: white;
    box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(114, 165, 195, 0.3);
    background-size: 100% auto;
    background-repeat: no-repeat;
    border-radius: 32rpx;
    padding-top: 22rpx;

    padding-bottom: 24rpx;
    height: 341rpx; //如果你改动了这里，你要去上面那个selectHeight方法修改206的那个值，具体可以看方法里面的说明
    margin: 0 16rpx 0;
    overflow-x: scroll;
    &::after {
      content: "";
      position: absolute;
      height: 366rpx;
      width: 44rpx;
      background: linear-gradient(
        270deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%,
        #ffffff 100%
      );
      bottom: 0;
      right: 0;
      border-radius: 0 32rpx 32rpx 0;
      z-index: 11;
    }
    .recomBoxTitle {
      display: flex;
      padding-left: 28rpx;
      .recomBoxIcon {
        width: 40rpx;
        height: 40rpx;
      }
      .recomBoxName {
        margin-left: 16rpx;
        height: 42rpx;
        font-size: 30rpx;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #000000;
        line-height: 42rpx;
      }
    }
    .swiper-item {
      .avator {
        position: relative;
        border-radius: 50%;
        .recomPosImg {
          border-radius: 50%;
        }
        .addCollectIcon {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 36rpx;
          height: 36rpx;
          // z-index: 10;
          // transition: transform 1s ease-in-out;
          &.isClicked {
            animation: addCollectScaleAnimation 1s ease-in-out;
          }
        }
      }
    }
  }
  &.recentBox {
    position: relative;
    background-image: url($img-base + "common/" + "recomBox_background.png");
    background-color: white;
    box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(114, 165, 195, 0.3);
    background-size: 100% auto;
    background-repeat: no-repeat;
    border-radius: 32rpx;
    padding-top: 22rpx;
    padding-left: 28rpx;
    padding-right: 28rpx;
    // padding-bottom: 24rpx;
    // height: 366rpx;
    overflow: hidden;
    margin: 0 16rpx 0;
    .recentBoxTitle {
      display: flex;
      .recentBoxIcon {
        width: 40rpx;
        height: 40rpx;
      }
      .recentBoxName {
        margin-left: 16rpx;
        height: 42rpx;
        font-size: 30rpx;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #000000;
        line-height: 42rpx;
      }
    }
    .swiper-item {
      .posList.recentPosList {
        display: grid;
        grid-column-gap: 53rpx;
        grid-row-gap: 14rpx;
        grid-template-columns: repeat(3, 1fr);
        height: 585rpx;
        transition: height 0.5s ease;
        overflow: hidden;
        .posItem {
          margin-right: 0rpx;
        }
      }
      .posList.recentPosList.isRecentMore {
        // height: auto;
      }
      .avator {
        position: relative;
        border-radius: 50%;
        width: 124rpx;
        height: 124rpx;
        .recentPosImg {
          border-radius: 50%;
          width: 124rpx;
          height: 105.52rpx;
        }
      }
    }
    .recentMoreBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #bdc6d9;
      font-size: 24rpx;
      height: 90rpx;
      .recentMoreArrow {
        width: 24rpx;
        height: 24rpx;
        margin-left: 4rpx;
      }
    }
    .recentMoreBlank {
      height: 94rpx;
    }
  }
}
.allPosition {
  position: relative;
  border-radius: 16rpx 16rpx 0 0;
  // background: #f4f6f8;
  // background-image: url($img-base + "common/" + "position_scrollView_backgorund.png");
  // background-size: 100% auto;
  // background-repeat: no-repeat;
  margin: 100rpx 20rpx 0;
  padding-bottom: 80rpx;
  .positionList {
    padding: 0 12rpx;
    .posCard {
      position: relative;
      padding-bottom: 28rpx;

      .cateContent {
        display: grid;
        grid-row-gap: 16rpx;
        grid-column-gap: 5rpx;
        grid-template-columns: repeat(2, 1fr);
        &::after {
          content: "";
          width: 334rpx;
          flex-grow: 1;
          margin-left: 16rpx;
        }

        .positionItem {
          width: 334rpx;
          padding: 24rpx;
          background: #ffffff;
          border-radius: 16rpx;
          display: flex;
          flex-direction: column;
          flex-grow: 1;
          box-shadow: 0rpx 0rpx 8rpx 4rpx rgba(234, 238, 246, 0.5);
          text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-family: PingFangSC-Regular, PingFang SC;
          }

          .tagTitle {
            font-weight: bold;
            color: #333333;
            line-height: 40rpx;
            font-size: 28rpx;
          }

          .desc {
            margin-top: 16rpx;
            font-size: 24rpx;
            color: #98a0b0;
            line-height: 34rpx;
            font-weight: 400;
          }
        }
      }
    }
  }
}
.cardHeader {
  font-size: 30rpx;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
  padding: 26rpx 12rpx 0 24rpx;
  display: flex;
  align-items: center;
  position: relative;

  .cateNameContainer {
    display: flex;
    align-items: center;
    .cateNameIcon {
      width: 40rpx;
      height: 40rpx;
    }
    .cateName {
      height: 42rpx;
      font-size: 30rpx;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #000000;
      line-height: 42rpx;
      margin-left: 16rpx;
      margin-right: 16rpx;
    }
    .cateNum {
      font-size: 24rpx;
      color: #98a0b0;
    }
    .cateArrowIcon {
      width: 32rpx;
      height: 32rpx;
      margin-left: 8rpx;
    }

    .majorIcon {
      margin-left: 2rpx;
      font-size: 20rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ff7731;
      line-height: 28rpx;
      padding: 2rpx 8rpx;
      border-radius: 6rpx;
      border: 0.6rpx solid #ff7731;
    }
  }

  .active {
    position: relative;
    font-size: 32rpx;
    font-weight: 600;
    color: #000000;

    &::after {
      content: "";
      position: absolute;
      width: 20px;
      height: 8px;
      background: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0) 0%,
        #ff7731 100%
      );
      border-radius: 4px;
      bottom: -4rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .filterImg {
    width: 130rpx;
    height: 75rpx;
    position: absolute;
    right: 25rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -20rpx;

    image {
      width: 52rpx;
      height: 48rpx;
      margin-bottom: 18rpx;
    }
    text {
      margin-right: 8rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #b3b7c0;
      line-height: 34rpx;
    }
  }
}
.cateTag {
  position: relative;
  top: 0;
  padding-bottom: 18rpx;
  padding-top: 24rpx;

  text {
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #98a0b0;
    line-height: 40rpx;
    width: 63%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 20rpx;
  }

  .photo {
    width: 64rpx;
    height: 56rpx;
    position: absolute;
    bottom: 0;
    right: 76rpx;
  }

  .scaleImg {
    width: 140rpx;
    height: 124rpx;
  }
}
</style>
